<style lang="less" scoped>
  
  .table-page-search-wrapper{
    display: flex !important;
    justify-content: flex-start;
  }
</style>
<template>
  <a-modal :visible="visible" width="1200px" title="订单明细" :footer="null" @cancel="closeModel">
      <div class="table-page-search-wrapper">
        <a-radio-group v-model="queryParam.writeoff" @change="$refs.table.refresh(true)">
          <a-radio :value="0">
            全部
          </a-radio>
          <a-radio :value="2">
            已核销
          </a-radio>
          <a-radio :value="1">
            未核销
          </a-radio>
        </a-radio-group>
      </div>
      
      <!-- <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd" v-action:label_add2>新建</a-button>
      </div> -->
      
      <s-table
        class="margT10"
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="list"
        showPagination="auto"
        >
        <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @onSelect="onSelect(record, selected, selectedRows)" -->
        <span slot="shopInfo" slot-scope="text, record">
          <div>
            <span>商品名：{{record.product_name}}</span>
          </div>
          <div style="display: flex; margin-top: 6px;">
            <!-- <div>
              <a-avatar :src="record.picture" :size="70" style="margin-right:5px"/>
            </div> -->
            <div style="min-width: 60px;">
              <div>
                <span>价格：<span class="red">{{record.price}}￥</span></span>
                <span class="margL10">数量：<span class="red">{{record.num}}</span></span>
                <span class="margL10">总价：<span class="red">{{record.total}}￥</span></span>
              </div>
            </div>
            <div class="margL10">
              <a-tag :color="$myUtils.getColor(record.status)">{{record.statusname}}</a-tag>
              <span v-if="record.status!=4">
                <a-tag :color="record.writeoff == 1?'red':'green'">
                  {{record.writeoff == 1?'未核销':'已核销'}}
                </a-tag>
                <span class="margL10" v-if="record.writeoff == 2">核销时间：{{record.verification_time||'---'}}</span>
              </span>
            </div>
          </div>
        </span>
        <span slot="ordermaninfo" slot-scope="text, record">
          <div class="margL10">
            <div><span>手机号：{{JSON.parse(record.val).mobile||'---'}}</span></div>
            <div><span>身份证号：{{JSON.parse(record.val).idcard||'---'}}</span></div>
          </div>
        </span>
        <!-- <span slot="status" slot-scope="text, record">
           <a-tag :color="record.writeoff == 1?'red':'green'">
             {{record.writeoff == 1?'未核销':'已核销'}}
           </a-tag>
           <div v-if="record.writeoff == 2">核销时间：{{record.verification_time||'---'}}</div>
        </span> -->
        <span slot="action" slot-scope="text, record">
          <template>
              <a-popconfirm v-if="record.writeoff==1&&record.status!=4" title="确定要重发短信吗?" ok-text="确定" cancel-text="取消" @confirm="confirmSend(record)"
                @cancel="cancel(record)">
                <a>重发短信</a>
              </a-popconfirm><br>
              <!-- <a v-action:checkyzuordertn2>手动核销</a><br> -->
              <a v-if="record.writeoff==1&&record.status!=4" @click="hexiaoBtn(record,'zi')" v-action:checkyzuordertn2>核销</a><br>
              <a-popconfirm
                v-if="record.status==2&&record.is_refund!=2"
                v-action:backyzuordertn2
                title="确定退单吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmBack(record)"
                @cancel="cancel(record)"
              >
                <div><a>退单</a></div>
              </a-popconfirm>
              
              
            </div>
          </template>
        </span>
      </s-table>
    
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import {
    STable
  } from '@/components'
  
  //引入vuex
  import { mapGetters,mapActions } from 'vuex'
  
  const columns = [
    {
      title: '订单号',
      dataIndex: 'id'
    },
    {
      title: '订单信息',
      dataIndex: 'shopInfo',
      scopedSlots: { customRender: 'shopInfo' }
    },
    {
      title: '人员信息',
      dataIndex: 'ordermaninfo',
      scopedSlots: { customRender: 'ordermaninfo' }
    },
    
    // {
    //   title: '核销状态',
    //   dataIndex: 'status',
    //   scopedSlots: { customRender: 'status' }
    // },
    {
      title: '操作',
      dataIndex: 'action',
      width: '120px',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'orderDetail',
    props: {
      visible: {
        type: Boolean,
        required: true
      }
    },
    components: {
      STable
    },
    data() {
      this.columns = columns
      return {
        dateFormat: 'YYYY/MM/DD',
        labelList: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: {
          verification_number: 200,
          verification_num: 20000,
          compeleted_number: 20,
          compeleted_num: 1300,
          updownorder_num:30000,
          interface_number: 10,
          interface_sum: 2000,
        },
        list: (parameter) => {
          this.queryParam.order_id = this.order_id
          // this.queryParam.pageSize = 5
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return this.$productApi.OrderlistPage(requestParameters).then(res=>{
            return res.data
          })
          // return new Promise((res, reject) => {
          //   res()
          // }).then(res => {
          //   return {
          //     'data': [{
          //         project_name: '足浴1',
          //         username: '张三',
          //         mobile: '13730032253',
          //         price: 300,
          //         number: 10,
          //         amount: 2000,
          //         status: 1,
          //         completion_status: 1,
          //         remark:'600个蓝色'
          //       },
          //     ],
          //     'pageSize': 10,
          //     'pageNo': 0,
          //     'totalPage': 6,
          //     'totalCount': 57
          //   }
          // })
        },
        pageNo:1,
        pageSize:10,
        selectedRowKeys: [],
        selectedRows: [],
      }
    },
    computed: {
      ...mapGetters(['order_id']),
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        }
      },
    },
    watch:{
      visible:{
        handler(newValue) {
          if(newValue){
            // this.getOrderListPage()
            setTimeout(()=>{
              this.$refs.table.refresh()
            },1000)
          }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      // this.bus为原型链，在挂在main.js里挂载了，refreshTable是子组件监听父组件的事件，在父组件中用this.bus.$emit('refreshTable')来触发
      this.bus.$on('refreshTable',()=>{
        console.log('watch refreshTable')
        this.$refs.table.refresh()
      })
    },
    methods: {
      moment,
      ...mapActions(['SET_FLAG']),
      onChangeSelectTime(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      },
      getOrderListPage() {
        const params = {
          pageNo:this.pageNo,
          pageSize:this.pageSize,
          order_id:this.order_id,
        }
        this.$productApi.OrderlistPage(params).then(res=>{
          this.list = res.data
          console.log('list',this.list)
        })
      },
      handleAdd() {
        this.mdl = null
        this.visible = true
      },
      handleEdit(record) {
        this.visible = true
        this.mdl = {
          ...record
        }
      },
      // 添加子标签
      handleSub(record) {
        this.updata = true
        this.mdls = {
          ...record
        }
      },
      // 核销点击事件
      hexiaoBtn(record,flag) {
        this.SET_FLAG(flag)
        this.visible4hexiaoModel = true
        console.log("核销点击事件")
        this.$emit('hexiao',record)
      },
      closeModel() {
        this.$emit('cancel')
      },
      // 退单
      confirmBack(e) {
        // const form = this.$refs.createModal.form
        console.log(e)
        this.$productApi.OrderlistRefund({id: e.id}).then(res => {
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.success('退单成功');
        }).catch(error => {
          console.log('-------------error------------', error)
        })
      },
      cancel(e) {
        console.log(e)
        this.$message.error('已取消')
      },
      handleCancel() {
        this.visible = false

        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      // 启用
      handleEnable(record) {},
      // 禁用
      handleDisable(record) {},
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
      onSelect(record, selected, selectedRows) {
        console.log('record',record)
        console.log('selectedRows',selectedRows)
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date()),
        }
      },
      // 重置
      reset() {
        this.queryParam = {}
        // 刷新表格
        this.$refs.table.refresh()
      },
      // 搜素模糊查询
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    },
  }
</script>
